<template>
  <view class="container">
    <navigationBar title="@好友" />
    <view class="search">
      <uni-easyinput 
        prefixIcon="search" 
        v-model="searchVal" 
        placeholder="搜索好友" 
        @iconClick="onSearch"
      ></uni-easyinput>
    </view>
    <view class="friend-list">
      <view class="item" v-for="item in dataList.friendList" :key="item.id" @click="toComment(item)">
        <image :src="item.avatarUrl"/>
        <text>{{item.nickName}}</text>
      </view>
    </view>
    <!-- 暂无数据 -->
    <view class="is-end" v-if="isEnd">没有更多了</view>
  </view>
</template>

<script setup>
  import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
  import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";	
  import {collectionUserList} from '@/api/user.js'

  onMounted(() => {
    getFriend()
  })

  onShow(() => {
    uni.hideKeyboard()
  })

  onReachBottom(() => {
    console.log('滚动到底部')
		if(isEnd.value) return;
		pageData.page++
		getFriend()
	})

	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

	//分页数据
	const pageData = reactive({
		pageSize:10,
		page:1
	})

  const searchVal = ref('')
  const isEnd = ref(false)

  const dataList = reactive({
    friendList:[]
  })

  //获取好友列表
  const getFriend = async () => {
    let datas = {
      ...pageData,
      searchCondition:searchVal.value
    }
    let res = await collectionUserList(datas)

    if(res.list.length < pageData.pageSize) isEnd.value = true
    console.log('用户',res)
    dataList.friendList = res.list
  }

  const onSearch = () => {
    pageData.page = 1
    getFriend()
  }

  //点击某个用户就返回上一页  并把该用户id传回去
  const toComment = (item) => {
    // uni.navigateTo({
    //   url:  `/pages/postDetails/index?friendId=${item.dataId}&friendId=${item.nickName}`
    // })
    wx.setStorageSync('aiteUserInfo', item)
    uni.navigateBack({ delta: 1 })
  }

</script>

<style lang="scss" scoped>
  .container{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
    background-color: #F4F3F7;
		/* overflow: hidden; */
		/* display: flex;
		flex-direction: column; */

    .fixed-con {
      background-color: white;
      .go-back{
        width: 750rpx;
        height: 90rpx;
        padding:0 30rpx;
        box-sizing: border-box;
        @include flex(row,space-between,center);
        image{
          width: 40rpx;
          height: 40rpx;
        }
        view{
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
        .img-hide{
          opacity: 0;
        }
      }
    }

    .search{
      width: 750rpx;
      height: 64rpx;
      margin: auto;
      padding-top: calc(var(--status-bar-height) + 90rpx + 12rpx);
      padding-bottom: 12rpx;
      padding-left: 40rpx;
      padding-right: 40rpx;
      background-color: white;


      ::v-deep .uni-easyinput{
        width: 670rpx !important;
        height: 64rpx;
      }
      
      ::v-deep .uni-easyinput__content{
        width: 670rpx !important;
        height: 64rpx !important;
        background: #F4F3F7 !important;
        border-radius: 32rpx !important;
        backdrop-filter: blur(5px) !important;
      }
      ::v-deep .is-input-border{
        border: none !important;
      }

      ::v-deep .uni-icons{
        color: #D8D8D8 !important;
        font-size: 20px !important;
      }
    }

    .friend-list{
      width: 750rpx;
      padding: 0 40rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      background-color: white;

      .item{
        width: 670rpx;
        height: 120rpx;
        border-bottom: 2rpx solid #F1F1F1;
        @include flex(row,flex-start);

        image{
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;

        }

        text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #111111;
          margin-left: 16rpx;
        }
      }
    }

    .is-end{
			text-align: center;
			margin: 15rpx;
			color: #8a8a8a;
		}
  }

</style>